<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>试卷管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        #examName {
            text-align: center;
        }

        #courseName {
            text-align: center;
            padding-left: 30px;
        }

        .topicContent {
            margin-left: 40px;
            margin-top: 20px;
        }

        .topic-title {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="title">
    <h2 id="examName"></h2>
    <h4 id="courseName"></h4>
</div>
<div class="list">
    <div>
        <h3 class="topic-title">一、选择题</h3>
        <div id="multipleChoice" class="topicContent">

        </div>
        <h3 class="topic-title">二、填空题</h3>
        <div id="fillInTheBlank" class="topicContent">

        </div>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        let examId = CoreUtil.getUrlParam("examId");
        CoreUtil.sendAjax(`/exam/exam/${examId}`,null, (res) => {
            $("#examName").text(res.name)
            $("#courseName").text(res.courseName)
        },"GET", null, false, function (res) {
            layer.msg("没有相关数据");
        })
        let multipleChoiceTemplate = (res) => {
            return `
         <p>${res.title}：</p>
            <div>
               ${res.content}
            </div>
                <input type="radio" id="optionA" name="option" value="A"  >
                <label for="optionA">${res.optionA}</label>
                <br>
                <input type="radio" id="optionB" name="option" value="B">
                <label for="optionB">${res.optionB}</label>
                <br>
                <input type="radio" id="optionC" name="option" value="C" >
                <label for="optionC">${res.optionC}</label>
                <br>
                <input type="radio" id="optionD" name="option" value="D" >
                <label for="optionD">${res.optionD}</label>
        `
        }
        let questionsAndAnswers = (res) => {
            return `
                <p>${res.title}：</p>
                <div>
                     ${res.content}
                </div>
                <textarea name="content" title="答案" class="layui-textarea"></textarea>
            `
        }
        CoreUtil.sendAjax("/exam/topic/exam", {examId}, (res) => {
            res.map(topic => {
                if (topic.type === 1) {
                    let template = questionsAndAnswers(topic);
                    $("#fillInTheBlank").append(template)
                } else {
                    let template = multipleChoiceTemplate(topic);
                    $("#multipleChoice").append(template)
                }
            })
        }, "GET", null, false, function (res) {
            layer.msg("没有相关数据");
        })
    })
</script>